<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import { fn } from "storybook/test";
    import { Button } from "../Button";
    import { createUniqueId } from "../utils/createUniqueId";
    import Icon from "@iconify/svelte";
    import Modal from "./Modal.svelte";
    import { modal } from ".";

    const { Story } = defineMeta({
        title: "Components/Views/Modal",
        component: Modal,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });
</script>

<Story name="Default" args={{ visible: false }}>
    {#snippet template(args)}
        <Modal title="提示" bind:visible={args.visible}>
            <div>Modal 内容</div>
            <div>Modal 内容</div>
            <div>Modal 内容</div>
        </Modal>
        <Button
            onclick={() => {
                args.visible = true;
            }}>消息</Button
        >
    {/snippet}
</Story>

<Story name="DisableDraggale" args={{ visible: false }}>
    {#snippet template(args)}
        <Modal title="提示" draggale={false} bind:visible={args.visible}>
            <div>Modal 内容</div>
            <div>Modal 内容</div>
            <div>Modal 内容</div>
        </Modal>
        <Button
            onclick={() => {
                args.visible = true;
            }}>消息</Button
        >
    {/snippet}
</Story>

<Story name="DefaultPosition" args={{ visible: false }}>
    {#snippet template(args)}
        <Modal title="提示" defaultPosition={{ top: "100px" }} bind:visible={args.visible}>
            <div>Modal 内容</div>
            <div>Modal 内容</div>
            <div>Modal 内容</div>
        </Modal>
        <Button
            onclick={() => {
                args.visible = true;
            }}>消息</Button
        >
    {/snippet}
</Story>

<Story name="HideFooter" args={{ visible: false }}>
    {#snippet template(args)}
        <Modal title="提示" footer={false} bind:visible={args.visible}>
            <div>Modal 内容</div>
            <div>Modal 内容</div>
            <div>Modal 内容</div>
        </Modal>
        <Button
            onclick={() => {
                args.visible = true;
            }}>消息</Button
        >
    {/snippet}
</Story>

<Story name="Loading" args={{ visible: false }}>
    {#snippet template(args)}
        <Modal
            title="提示"
            loading
            bind:visible={args.visible}
            onok={() => {
                setTimeout(() => {
                    args.visible = false;
                }, 2000);
            }}
        >
            <div>Modal 内容</div>
            <div>Modal 内容</div>
            <div>Modal 内容</div>
        </Modal>
        <Button
            onclick={() => {
                args.visible = true;
            }}>消息</Button
        >
    {/snippet}
</Story>

<Story name="StopClose" args={{ visible: false }}>
    {#snippet template(args)}
        <Modal
            title="提示"
            loading
            bind:visible={args.visible}
            onok={async () => {
                return await new Promise((resolve) => {
                    setTimeout(() => {
                        resolve(false);
                    }, 2000);
                });
            }}
        >
            <div>Modal 内容</div>
            <div>Modal 内容</div>
            <div>Modal 内容</div>
        </Modal>
        <Button
            onclick={() => {
                args.visible = true;
            }}>消息</Button
        >
    {/snippet}
</Story>

<Story name="FullScreen" args={{ visible: false, fullScreen: false }}>
    {#snippet template(args)}
        <Modal title="提示" bind:visible={args.visible} fullScreen={args.fullScreen}>
            <Button
                onclick={() => {
                    args.fullScreen = !args.fullScreen;
                }}>全屏/退出</Button
            >
            <div>Modal 内容</div>
            <div>Modal 内容</div>
            <div>Modal 内容</div>
        </Modal>
        <Button
            onclick={() => {
                args.visible = true;
            }}>消息</Button
        >
    {/snippet}
</Story>

<Story name="ResetPosition" args={{ visible: false }}>
    {#snippet template(args)}
        <Modal title="提示" bind:visible={args.visible} resetPostion>
            <div>Modal 内容</div>
            <div>Modal 内容</div>
            <div>Modal 内容</div>
        </Modal>
        <Button
            onclick={() => {
                args.visible = true;
            }}>消息</Button
        >
    {/snippet}
</Story>

<Story name="NoMask" args={{ visible: false }}>
    {#snippet template(args)}
        <Modal title="提示" mask={false} bind:visible={args.visible}>
            <div>Modal 内容</div>
            <div>Modal 内容</div>
            <div>Modal 内容</div>
        </Modal>
        <Button
            onclick={() => {
                args.visible = true;
            }}>消息</Button
        >
    {/snippet}
</Story>

<Story name="MaskClosable" args={{ visible: false }}>
    {#snippet template(args)}
        <Modal title="提示" maskClosable={false} bind:visible={args.visible}>
            <div>Modal 内容</div>
            <div>Modal 内容</div>
            <div>Modal 内容</div>
        </Modal>
        <Button
            onclick={() => {
                args.visible = true;
            }}>消息</Button
        >
    {/snippet}
</Story>

<Story name="DestroyOnClose" args={{ visible: false }}>
    {#snippet template(args)}
        <Modal title="提示" destroyOnClose bind:visible={args.visible}>
            <div>Modal 内容</div>
            <div>Modal 内容</div>
            <div>Modal 内容</div>
            <div>{Math.random()}</div>
        </Modal>
        <Button
            onclick={() => {
                args.visible = true;
            }}>消息</Button
        >
    {/snippet}
</Story>

<Story name="Instance">
    {#snippet template(args)}
        <Button
            onclick={() => {
                modal.info({
                    title: "提示",
                    content: "Modal 内容",
                });
            }}>消息</Button
        >

        <Button
            type="success"
            onclick={() => {
                modal.success({
                    title: "提示",
                    content: "Success 内容",
                });
            }}>成功</Button
        >

        <Button
            type="warning"
            onclick={() => {
                modal.warning({
                    title: "提示",
                    content: "告警 内容",
                });
            }}>告警</Button
        >

        <Button
            type="error"
            onclick={() => {
                modal.error({
                    title: "提示",
                    content: "错误 内容",
                });
            }}>错误</Button
        >

        {#snippet renderContent()}
            <div>
                <div>pppppppppppp</div>
                <div>pppppppppppp</div>
                <div>pppppppppppp</div>
            </div>
        {/snippet}
        <Button
            type="primary"
            onclick={() => {
                modal.confirm({
                    title: "提示",
                    content: renderContent,
                });
            }}>确认</Button
        >
    {/snippet}
</Story>

<Story name="ButtonType">
    {#snippet template(args)}
        <Button
            type="error"
            onclick={() => {
                modal.error({
                    title: "提示",
                    content: "错误 内容",
                    okButtonType: "danger",
                });
            }}>错误</Button
        >
    {/snippet}
</Story>
